<template>
  <div class="p-15 bg-fff" v-loading="loading">
    <el-form class="pAll bg-fff" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="150px">
      <el-row>
        <el-col :span="18">
          <el-form-item label="网络持续正常:" prop="timeDate" class="mb_8">
            <el-input v-model.number="ruleForm.timeDate" :min="ruleForm.min" clearable class="w100" @input="handleInput($event)"></el-input>
            <span style="padding-left: 10px">分钟</span>
          </el-form-item>
          <el-form-item>
            <span style="color: #909399; padding-top: 8px">问题列表将会剔除设备网络异常的数据</span>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" size="medium" class="btnSizeStyle" @click="submitBtn()" v-preventReClick>保存</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script>
// import brandDictionaryVue from '../../property/brandDictionary.vue'
import { pinT } from '@/utils/allUrl.js'
export default {
  data() {
    var validateNum = (rule, value, callback) => {
      if (value < 1) {
        callback(new Error('最小数值为1'))
      } else if (value > 5) {
        callback(new Error('最大值不超过5'))
      } else {
        callback()
      }
    }
    return {
      ruleForm: {
        timeDate: '',
        id: '',
      },
      loading: false,
      rules: {
        timeDate: [
          { required: true, message: '此次为必填项', trigger: 'blur' },
          { validator: validateNum, trigger: 'blur' },
        ],
      },
    }
  },
  created() {
    this.initList()
  },
  methods: {
    handleInput(value, id) {
      value = value.replace(/[^0-9]/g, '') // 限制只输入数字
      this.ruleForm.timeDate = value
    },
    // 查询
    async initList() {
      this.loading = true
      const { data: res } = await this.$http.post(`${pinT}tx/selectTongXun`)
      this.loading = false
      switch (res.code) {
        case '0000':
          this.ruleForm = {
            timeDate: res.data.TongXun.minute,
            id: res.data.TongXun.id,
          }
          break
        default:
          this.$message.error(res.message)
          break
      }
    },
    // 修改
    async changeList() {
      const params = new URLSearchParams()
      params.append('ID', this.ruleForm.id)
      params.append('minute', this.ruleForm.timeDate)
      const { data: res } = await this.$http.post(`${pinT}tx/inserOrUpdatetTongXun`, params)
      switch (res.code) {
        case '0000':
          this.$message.success(res.message)
          break
        default:
          this.$message.error(res.message)
          break
      }
    },
    submitBtn() {
      this.$refs.ruleForm.validate(async (valid) => {
        if (!valid) {
          return
        }
        this.changeList()
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.w100 {
  width: 100px;
}
.mb_8 {
  margin-bottom: 8px;
}
</style>
